<template>
  <div class="top">
    <a href="#" @click.prevent="btn">
      <div class="bigbox">
        <img :src="img" alt="" />
        <h5 :style="{ backgroundColor: color_red }">{{ name }}</h5>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: 'buy',
  props: ['name', 'img', 'index', 'item'],
  data() {
    return {
      color_red: '#999',
    }
  },
  methods: {
    btn() {
      this.$emit('gg', this.index, this.item)
      this.color_red = '#' + Math.floor(Math.random() * 999)
      alert('狗狗这么可爱，你忍心卖掉嘛？')
    },
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.top {
  margin-top: 35px;
}
.bigbox {
  border: 1px solid #333;
  width: 400px;
  height: 251px;
  text-align: center;
}
img {
  width: 100%;
  height: 100%;
  /* margin-bottom: 10px; */
}
h5 {
  line-height: 30px;
  width: 400px;
  height: 30px;
  color: #333;
}
a {
  text-decoration: none;
}
</style>
